<div class="container">
    <h1 class="title is-size-1 has-text-centered">Filtering</h1>
    <p class="mb-4">In the list below, you cannot drag the item in red. This is because it is filtered out with a filter CSS class. Pass the name of this class to the `Filter` property to filter out an item.</p>


    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column is-half">
                    <SortableList Id="filtering" Filter=".filtered" Items="items" OnUpdate="@SortList" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-text-white has-cursor-grab @(item.Disabled ? "filtered has-background-danger" : "has-background-blazor")">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column is-half">
                    <SortableList Id="@ListId" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-cursor-grab @(item.Disabled ? "filtered has-background-danger" : "has-background-blazor1")">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>            
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent2</pre>
        </TabPage>
        
    </TabControl>
</div>

@code {
    private const string ListId = "FilterListId";

    private string codeContent1 = @"
    <SortableList Id=""filtering"" Filter="".filtered"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-text-white has-cursor-grab @(item.Disabled ? ""filtered has-background-danger"" : ""has-background-blazor"")"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {
        private void SortList((int oldIndex, int newIndex) indices)
        {
            // deconstruct the tuple
            var (oldIndex, newIndex) = indices;

            var items = this.items;
            var itemToMove = items[oldIndex];
            items.RemoveAt(oldIndex);

            if (newIndex < items.Count)
            {
                items.Insert(newIndex, itemToMove);
            }
            else
            {
                items.Add(itemToMove);
            }

            StateHasChanged();
        }
    }";

    private string codeContent2 = @"
    <SortableList Id=""@ListId"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-cursor-grab @(item.Disabled ? ""filtered has-background-danger"" : ""has-background-blazor1"")"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    @code {
        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

         private SingleSortableListGroup<Item> _group;

        protected override void OnInitialized()
        {
            var random = new Random();
            var randomIndex = random.Next(0, items.Count);
            items[randomIndex].Disabled = true;

            var settings = new SortableListSettings() { CssForDisabledItem = "".filtered"" };
            _group = new SingleSortableListGroup<Item>(ListId, new SortableListModel<Item>(items) { Settings = settings });
        }
    }
    ";

    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private SingleSortableListGroup<Item> _group;

    // on initialized, set a random item in the list to disabled
    protected override void OnInitialized()
    {
        var random = new Random();
        var randomIndex = random.Next(0, items.Count);
        items[randomIndex].Disabled = true;

        var settings = new SortableListSettings() { CssForDisabledItem = ".filtered" };
        _group = new SingleSortableListGroup<Item>(ListId, new SortableListModel<Item>(items) { Settings = settings });
    }


    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }
}
